<template>
  <div>
    <button @click="changeName">改名字</button>
    <button @click="changeAge">改年龄</button>
    <button @click="changePerson">改整体</button>
    <button @click="changeCar1">改car1</button>
  </div>
</template>
<script setup lang="ts">
import { reactive, watch } from 'vue'

const person = reactive({ name: '张三', age: 18, car: { c1: '奥迪', c2: '本田' } })
//房子没换 换了床
function changeName() {
  person.name = '李四'
}
//房子没换 换了沙发
function changeAge() {
  person.age = 19
}
//房子换了
function changePerson() {
  Object.assign(person, { name: '李四', age: 20 })
}

function changeCar1() {
  person.car.c1 = '爱玛'
}

//如果监视的是reactive包裹的值 那么默认创建深层监听，你写不写deep它都是deep为true 且关不掉
watch(person, (newVal, oldVal) => {
  console.log('person 变化', newVal, oldVal)
})

//如果是监听一个属性的话 ，且这个熟悉是基本类型 ，那就要返回一个函数
watch(
  () => person.car.c1,
  (newVal, oldVal) => {
    console.log('person.car 函数变化', newVal, oldVal)
  }
)
//
//如果是监听一个属性的话 ，且这个熟悉是对象类型 ，那就要返回一个函数加deep才能完全监听
watch(
  () => person.car,
  (newVal, oldVal) => {
    console.log('person.car deep变化', newVal, oldVal)
  },
  {
    deep: true
  }
)
//
//如果是监听一个属性的话 ，且这个熟悉是对象类型 ，因为他本身就是一个响应式对象所以不需要deep
watch(person.car, (newVal, oldVal) => {
  console.log('person.car 对象变化', newVal, oldVal)
})
//还可以监听一个数组
watch([() => person.name, () => person.car.c1], (newVal, oldVal) => {
  console.log('数组变化', newVal, oldVal)
})
</script>

<style lang="scss" scoped></style>
